```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售机会管理 - AI销售管理平台</title>
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            min-height: 100vh;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .stage-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(8px);
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }
        .stage-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }
        .opportunity-item {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            border-left: 4px solid #667eea;
        }
        .opportunity-item:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            transform: translateX(4px);
        }
        .probability-bar {
            height: 8px;
            border-radius: 4px;
            background: #e2e8f0;
            overflow: hidden;
        }
        .probability-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
            transition: width 0.5s ease;
        }
        .kanban-column {
            min-height: 600px;
            background: rgba(248, 250, 252, 0.5);
            border-radius: 12px;
            border: 2px dashed #e2e8f0;
        }
        .nav-active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            padding: 12px 24px;
            transition: all 0.3s ease;
            color: white;
            border: none;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg"></div>
                    <span class="text-xl font-bold text-gray-800">AI销售管理平台</span>
                </div>
                
                <div class="hidden md:flex items-center space-x-8">
                    <a href="customer-management.html" class="text-gray-600 hover:text-blue-600 transition-colors">客户管理</a>
                    <a href="sales-opportunity.html" class="nav-active px-4 py-2 text-white font-medium">销售机会</a>
                    <a href="performance-analysis.html" class="text-gray-600 hover:text-blue-600 transition-colors">业绩分析</a>
                    <a href="ai-recommendations.html" class="text-gray-600 hover:text-blue-600 transition-colors">智能推荐</a>
                </div>
                
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <i class="fas fa-bell text-gray-600 text-lg cursor-pointer"></i>
                        <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 bg-gradient-to-r from-blue-400 to-blue-600 rounded-full"></div>
                        <span class="text-gray-700">张经理</span>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <div class="max-w-7xl mx-auto px-4 py-8">
        <!-- 页面标题和操作区 -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-800 mb-2">销售机会管理</h1>
                <p class="text-gray-600">AI驱动的商机全生命周期管理，智能预测转化概率</p>
            </div>
            <div class="flex space-x-4 mt-4 md:mt-0">
                <button class="btn-primary flex items-center space-x-2">
                    <i class="fas fa-plus"></i>
                    <span>新建机会</span>
                </button>
                <button class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors flex items-center space-x-2">
                    <i class="fas fa-filter"></i>
                    <span>筛选</span>
                </button>
            </div>
        </div>

        <!-- 关键指标卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="glass-card p-6">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-600 text-sm">总机会数</p>
                        <p class="text-2xl font-bold text-gray-800">128</p>
                    </div>
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-briefcase text-blue-600 text-xl"></i>
                    </div>
                </div>
                <div class="mt-2 text-sm text-green-600">
                    <i class="fas fa-arrow-up"></i>
                    <span>较上月 +12%</span>
                </div>
            </div>
            
            <div class="glass-card p-6">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-600 text-sm">预计成交额</p>
                        <p class="text-2xl font-bold text-gray-800">¥2,850K</p>
                    </div>
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-chart-line text-green-600 text-xl"></i>
                    </div>
                </div>
                <div class="mt-2 text-sm text-green-600">
                    <i class="fas fa-arrow-up"></i>
                    <span>较上月 +8%</span>
                </div>
            </div>
            
            <div class="glass-card p-6">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-600 text-sm">平均转化率</p>
                        <p class="text-2xl font-bold text-gray-800">32%</p>
                    </div>
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-percentage text-purple-600 text-xl"></i>
                    </div>
                </div>
                <div class="mt-2 text-sm text-green-600">
                    <i class="fas fa-arrow-up"></i>
                    <span>AI优化 +5%</span>
                </div>
            </div>
            
            <div class="glass-card p-6">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-gray-600 text-sm">需跟进机会</p>
                        <p class="text-2xl font-bold text-gray-800">18</p>
                    </div>
                    <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-clock text-orange-600 text-xl"></i>
                    </div>
                </div>
                <div class="mt-2 text-sm text-red-600">
                    <i class="fas fa-exclamation-circle"></i>
                    <span>3个高优先级</span>
                </div>
            </div>
        </div>

        <!-- 看板式布局 -->
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
            <!-- 阶段1: 初步接触 -->
            <div class="kanban-column p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-semibold text-gray-700">初步接触</h3>
                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">12</span>
                </div>
                
                <div class="space-y-4">
                    <!-- 机会卡片 -->
                    <div class="opportunity-item p-4">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h4 class="font-semibold text-gray-800">ABC科技有限公司</h4>
                                <p class="text-sm text-gray-600">企业软件解决方案</p>
                            </div>
                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">高价值</span>
                        </div>
                        
                        <div class="mb-3">
                            <div class="flex justify-between text-sm text-gray-600 mb-1">
                                <span>AI预测转化率</span>
                                <span>45%</span>
                            </div>
                            <div class="probability-bar">
                                <div class="probability-fill" style="width: 45%"></div>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-gray-500">下次跟进: 明天</span>
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="text-gray-500 hover:text-gray-700">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="opportunity-item p-4">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h4 class="font-semibold text-gray-800">XYZ制造集团</h4>
                                <p class="text-sm text-gray-600">生产管理系统</p>
                            </div>
                            <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">中等</span>
                        </div>
                        
                        <div class="mb-3">
                            <div class="flex justify-between text-sm text-gray-600 mb-1">
                                <span>AI预测转化率</span>
                                <span>28%</span>
                            </div>
                            <div class="probability-bar">
                                <div class="probability-fill" style="width: 28%"></div>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-gray-500">下次跟进: 3天后</span>
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="text-gray-500 hover:text-gray-700">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 阶段2: 需求分析 -->
            <div class="kanban-column p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-semibold text-gray-700">需求分析</h3>
                    <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">8</span>
                </div>
                
                <div class="space-y-4">
                    <div class="opportunity-item p-4">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h4 class="font-semibold text-gray-800">DEF金融服务</h4>
                                <p class="text-sm text-gray-600">风险管理系统</p>
                            </div>
                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">高价值</span>
                        </div>
                        
                        <div class="mb-3">
                            <div class="flex justify-between text-sm text-gray-600 mb-1">
                                <span>AI预测转化率</span>
                                <span>67%</span>
                            </div>
                            <div class="probability-bar">
                                <div class="probability-fill" style="width: 67%"></div>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-red-500 font-medium">⚠️ 今天需跟进</span>
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="text-gray-500 hover:text-gray-700">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 阶段3: 方案制定 -->
            <div class="kanban-column p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-semibold text-gray-700">方案制定</h3>
                    <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">6</span>
                </div>
                
                <div class="space-y-4">
                    <div class="opportunity-item p-4">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h4 class="font-semibold text-gray-800">GHI医疗集团</h4>
                                <p class="text-sm text-gray-600">医疗信息化平台</p>
                            </div>
                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">高价值</span>
                        </div>
                        
                        <div class="mb-3">
                            <div class="flex justify-between text-sm text-gray-600 mb-1">
                                <span>AI预测转化率</span>
                                <span>82%</span>
                            </div>
                            <div class="probability-bar">
                                <div class="probability-fill" style="width: 82%"></div>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-gray-500">方案评审中</span>
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="text-gray-500 hover:text-gray-700">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 阶段4: 商务谈判 -->
            <div class="kanban-column p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-semibold text-gray-700">商务谈判</h3>
                    <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded-full">4</span>
                </div>
                
                <div class="space-y-4">
                    <div class="opportunity-item p-4">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h4 class="font-semibold text-gray-800">JKL教育机构</h4>
                                <p class="text-sm text-gray-600">在线教育平台</p>
                            </div>
                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">高价值</span>
                        </div>
                        
                        <div class="mb-3">
                            <div class="flex justify-between text-sm text-gray-600 mb-1">
                                <span>AI预测转化率</span>
                                <span>91%</span>
                            </div>
                            <div class="probability-bar">
                                <div class="probability-fill" style="width: 91%"></div>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-orange-500 font-medium">💰 价格谈判中</span>
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="text-gray-500 hover:text-gray-700">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 阶段5: 成交关闭 -->
            <div class="kanban-column p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-semibold text-gray-700">成交关闭</h3>
                    <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">5</span>
                </div>
                
                <div class="space-y-4">
                    <div class="opportunity-item p-4">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h4 class="font-semibold text-gray-800">MNO零售连锁</h4>
                                <p class="text-sm text-gray-600">POS系统升级</p>
                            </div>
                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">已完成</span>
                        </div>
                        
                        <div class="mb-3">
                            <div class="flex justify-between text-sm text-gray-600 mb-1">
                                <span>实际成交率</span>
                                <span>100%</span>
                            </div>
                            <div class="probability-bar">
                                <div class="probability-fill" style="width: 100%; background: #10b981"></div>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-green-600 font-medium">✅ 本月已成交</span>
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="text-gray-500 hover:text-gray-700">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- AI智能分析区域 -->
        <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- 转化概率预测图表 -->
            <div class="glass-card p-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-semibold text-gray-800">AI转化概率预测分析</h3>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm">本月</button>
                        <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm">本季度</button>
                    </div>
                </div>
                <div id="probabilityChart" style="height: 300px;"></div>
            </div>

            <!-- 智能提醒和建议 -->
            <div class="glass-card p-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-semibold text-gray-800">AI智能提醒与建议</h3>
                    <i class="fas fa-robot text-blue-600 text-xl"></i>
                </div>
                
                <div class="space-y-4">
                    <div class="p-4 bg-yellow-50 border-l-4 border-yellow-400 rounded">
                        <div class="flex items-start space-x-3">
                            <i class="fas fa-exclamation-triangle text-yellow-600 mt-1"></i>
                            <div>
                                <h4 class="font-medium text-gray-800">高价值机会跟进提醒</h4>
                                <p class="text-sm text-gray-600 mt-1">DEF金融服务需求分析阶段已超过7天，建议立即安排深度沟通会议</p>
                                <div class="flex space-x-2 mt-2">
                                    <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">紧急</span>
                                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">高价值</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4 bg-blue-50 border-l-4 border-blue-400 rounded">
                        <div class="flex items-start space-x-3">
                            <i class="fas fa-lightbulb text-blue-600 mt-1"></i>
                            <div>
                                <h4 class="font-medium text-gray-800">个性化跟进建议</h4>
                                <p class="text-sm text-gray-600 mt-1">根据历史数据分析，GHI医疗集团对技术演示反应良好，建议安排产品演示会议</p>
                                <div class="flex space-x-2 mt-2">
                                    <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">建议</span>
                                    <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">技术型</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4 bg-green-50 border-l-4 border-green-400 rounded">
                        <div class="flex items-start space-x-3">
                            <i class="fas fa-chart-line text-green-600 mt-1"></i>
                            <div>
                                <h4 class="font-medium text-gray-800">转化率提升机会</h4>
                                <p class="text-sm text-gray-600 mt-1">ABC科技有限公司的沟通频率可提升至每周2次，预计可将转化率从45%提升至60%</p>
                                <div class="flex space-x-2 mt-2">
                                    <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">优化</span>
                                    <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">潜力</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化ECharts图表
        document.addEventListener('DOMContentLoaded', function() {
            // 转化概率预测图表
            const probabilityChart = echarts.init(document.getElementById('probabilityChart'));
            const probabilityOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['低概率', '中概率', '高概率'],
                    textStyle: {
                        color: '#475569'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['初步接触', '需求分析', '方案制定', '商务谈判', '成交关闭'],
                    axisLine: {
                        lineStyle: {
                            color: '#cbd5e1'
                        }
                    },
                    axisLabel: {
                        color: '#64748b'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '机会数量',
                    axisLine: {
                        lineStyle: {
                            color: '#cbd5e1'
                        }
                    },
                    axisLabel: {
                        color: '#64748b'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#f1f5f9'
                        }
                    }
                },
                series: [
                    {
                        name: '低概率',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [8, 2, 1, 0, 0],
                        itemStyle: {
                            color: '#ef4444'
                        }
                    },
                    {
                        name: '中概率',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [3, 4, 2, 1, 0],
                        itemStyle: {
                            color: '#f59e0b'
                        }
                    },
                    {
                        name: '高概率',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [1, 2, 3, 3, 5],
                        itemStyle: {
                            color: '#10b981'
                        }
                    }
                ]
            };
            probabilityChart.setOption(probabilityOption);

            // 响应式调整
            window.addEventListener('resize', function() {
                probabilityChart.resize();
            });

            // 拖拽功能模拟（简化版）
            const opportunityItems = document.querySelectorAll('.opportunity-item');
            opportunityItems.forEach(item => {
                item.setAttribute('draggable', 'true');
                
                item.addEventListener('dragstart', function(e) {
                    e.dataTransfer.setData('text/plain', this.id);
                    this.classList.add('opacity-50');
                });
                
                item.addEventListener('dragend', function() {
                    this.classList.remove('opacity-50');
                });
            });

            const kanbanColumns = document.querySelectorAll('.kanban-column');
            kanbanColumns.forEach(column => {
                column.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    this.classList.add('bg-blue-50');
                });
                
                column.addEventListener('dragleave', function() {
                    this.classList.remove('bg-blue-50');
                });
                
                column.addEventListener('drop', function(e) {
                    e.preventDefault();
                    this.classList.remove('bg-blue-50');
                    // 在实际应用中，这里会更新数据库中的机会阶段
                });
            });
        });
    </script>
</body>
</html>
```